-
Notifications
You must be signed in to change notification settings - Fork 97
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow using css-modules with SASS, LESS and Stylus #35
Conversation
|
@erfanio Of course, only one of them should be enabled, you can't have both. |
@kitze Can this be reviewed and merged? |
Thanks, very useful ! |
@lewisdiamond I'm Is it actually possible to use the fork right now? It seems if we simply replace the repository version with the fork's URL the entire source is downloaded, and what we need is just a subtree... |
@igorsantos07 what's the difference between a Sass module and SASS? |
When will this be merged? |
@aligajani sounds like someone is trying to navigate an ocean without even knowing how to tie a knot? :) SASS Modules is analogous to CSS Modules, except that your SASS is converted into CSS using the modules approach instead of the standard SASS translation - think of it like SASS + CSS Modules if it makes things easier. |
@igorsantos07 I use yarn, link the scripts then use create-react-app. You can probably link it then swap it in an existing app, I havent tried. |
@igorsantos07 I'm not making changes until @kitze asks for it. |
@lewisdiamond @erfanio I was able to enable SASS and SASS_MODULES at the same time. My problem is simple: I came up with this quick and dirty fix: It's far from perfect but it give the idea. |
IMO mixing both is counter productive. You end up with components that only half work outside of its initial context. The whole point of CSS modules is to have actual components, I.e. no other dependencies. If you mix, you break that. React is very good at making components easy to use and manage so your "globals" should be limited to variables. Also I'd definitely make it "*.not_modules.css" because that's definitely not the preferred method to write CSS in react. |
@lewisdiamond I'm completely agree with you and I always keep it this way. My problem is when I'm using a third party component. Lately I integrated with a toggle component https://github.com/aaronshaf/react-toggle
That's why I came up with this (dirty) name convention. But maybe you have an other way to solve this (common?) problem ? (I hope !) |
Nobody has an idea to resolve the problem with third party components? |
With bootstrap I import the CSS globally in my index.html
<link rel="stylesheet" href="bootstrap.css">
As you probably notice, with CSS module enable you can't import from react
using
@import './boostrap.css'
as it will "modularize" the css name and it will not match your class name
anymore.
2017-01-23 8:31 GMT+01:00 sandronm <[email protected]>:
… Nobody has an idea to resolve the problem with third party components?
How can we using for example Bootstrap with CSS modules?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#35 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABVrpKEpzvlmbguw_850muF59MLdyuDGks5rVFdtgaJpZM4LDXNm>
.
|
Yes, that's my point :-) Ok so I have to import the CSS globally in my index.html ^^ |
I released my repo on npm for those of you who are interested. It's ridiculous that this merge request is still sitting here without any updates. I can't say up-to-date this will be in the future (it's probably already outdated). https://www.npmjs.com/package/custom-react-scripts-with-modules |
Thanks lewisdiamond ! |
Already working on implementing this in another, more flexible way. Sorry for closing this. |
^ any movement on that? I'd like to keep using this but I'm also pretty close to just ejecting. |
@Robdel12 Basically create a Here's a "hacky" modification for my current needs:
Eventually I'll add helpers to the package so you can do something like
Feel free to send pull requests to my repo. |
I used separate properties with
_MODULES
appended so it doesn't break for people using.css
with modules and.scss
without modules.